<template>
  <div class="side-bar">
    <div class="search">
      <el-input
        prefix-icon="Search"
        v-model="data.search"
        placeholder="搜索工序组件"
        clearable
      >
      </el-input>
    </div>
    <div class="bottom">
      <div class="group" v-for="(group, k) in data.groupList" :key="k">
        <div class="group-title">{{ group.title }}</div>
        <div class="item-box">
          <div
            class="item"
            :draggable="true"
            @dragstart="onDragStart($event, item.type)"
            v-for="(item, index) in group.list"
            :key="index"
          >
            <el-image class="icon" :src="item.icon" fit="cover" />
            <div class="title">{{ item.title }}</div>
            <div class="dec">{{ item.dec }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import useDragAndDrop from "./useDnD";

const { onDragStart } = useDragAndDrop();

import { reactive } from "vue";
import machiningIcon from "@/assets/images/machiningIcon.png";
import chemicalTreatmentIcon from "@/assets/images/chemicalTreatmentIcon.png";
import heatTreatmentIcon from "@/assets/images/heatTreatmentIcon.png";
import qualityTestingIcon from "@/assets/images/qualityTestingIcon.png";
import automaticAssemblyIcon from "@/assets/images/automaticAssemblyIcon.png";
import laserProcessingIcon from "@/assets/images/laserProcessingIcon.png";
const data = reactive({
  search: "",
  groupList: [
    {
      title: "基础工序",
      list: [
        {
          icon: machiningIcon,
          title: "机械加工",
          dec: "标准机械加工工序",
          dec1: "Input Node",
          type: "input",
        },
        {
          icon: chemicalTreatmentIcon,
          title: "化学处理",
          dec: "化学反应处理工序",
          dec1: "Default Node",
          type: "default",
        },
        {
          icon: heatTreatmentIcon,
          title: "热处理",
          dec: "材料热处理工序",
          dec1: "Output Node",
          type: "output",
        },
        {
          icon: qualityTestingIcon,
          title: "质检",
          dec: "品质检测工序",
        },
      ],
    },
    {
      title: "高级工序",
      list: [
        {
          icon: automaticAssemblyIcon,
          title: "自动化装配",
          dec: "机器人自动装配",
        },
        {
          icon: laserProcessingIcon,
          title: "激光加工",
          dec: "精密激光处理",
        },
      ],
    },
  ],
});
</script>
<style lang="scss">
.side-bar {
  width: 319px;
  height: 100%;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  .search {
    box-sizing: border-box;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    padding: 16px;
  }
  .bottom {
    padding: 16px;
    overflow-y: auto;
    flex-grow: 1;
    flex-basis: 0;
    .group {
      .group-title {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 12px;
        margin-top: 12px;
        text-align: left;
      }
      .group-title:first-child {
        margin-top: 0;
      }
      .item-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          width: 49%;
          padding: 13px;
          background: #ffffff;
          box-sizing: border-box;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          margin-bottom: 12px;
          cursor: pointer;
          .icon {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
          }
          .title {
            font-family: Roboto;
            font-size: 14px;
            font-weight: 500;
            color: #111827;
            margin-bottom: 4px;
          }
          .dec {
            font-family: Roboto;
            font-size: 12px;
            color: #6b7280;
          }
        }
      }
    }
  }
}
</style>
